﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <ul>
        <li id="a1">aa</li>
        <li id="a2">aa</li>
        <li id="a3">aa</li>
    </ul>

    <script type="text/javascript">

        //        //1.不正确的试用方式
        //        for (var i = 1; i < 4; i++) {
        //            var id = document.getElementById("a" + i);
        //            /*     
        //            这里生成了一个匿名函数并赋值给对象 id_i;     
        //            */
        //            id.onclick = function() {
        //                /*          
        //                这个i来源于局部变量，无法以window.i或者obj.i的形式在后期引用，          
        //                只好以指针或者变量地址方式保存在这个匿名函数中，          
        //                这就是传说的闭包，所以所有这个过程中生成的事件句柄都使用引用          
        //                的方式来持久这个变量，也就是这些匿名函数共用一个变量i;          
        //                */
        //                alert(i); //现在都是返回4
        //            };
        //        };


        /*2.正确的使用方式*/
        for (var i = 1; i < 4; i++) {
            var id = document.getElementById("a" + i);
            id.m = i;
            (function(obj) {
                obj.onclick = function() {
                    alert(obj.m);
                } 
            })(id);
        }
    </script>

</body>
</html>
